<script>

import QrCodeView from '@comp/qrcode/QrCodeView.vue'
import { getAction } from '@api/manage'

export default {
  name: 'AppDownload',
  components: { QrCodeView },
  data() {
    return {
      badgeText: '',
      appInfoAvailable: false,
      qrCodeImage: null,
    }
  },
  computed: {
  },
  mounted() {
    this.fetchAppInfo()
  },
  methods: {
    async fetchAppInfo() {
      try {
        getAction('/system/app/latest', {}).then((res) => {
          let { result } = res
          if (result) {
            const { versionName, downloadUrl } = result
            this.appInfoAvailable = true
            this.badgeText = versionName.startsWith('v') ? versionName : `v${versionName}`
            this.qrCodeImage = downloadUrl
          }
        })
      } catch (error) {
        console.error('获取APP信息失败:', error)
        this.appInfoAvailable = false
      }
    },
  }
}
</script>

<template>
  <div class="app-download-container">
    <a-popover placement="bottomRight" trigger="click">
      <a-badge :count="badgeText" :show-zero="false">
        <a-icon
          style="font-size: 16px;"
          type="mobile"
          class="download-icon"
        />
      </a-badge>
      <template slot="content">
        <div v-if="appInfoAvailable" class="qr-container">
          <div class="qr-image">
            <qr-code-view
              v-if="qrCodeImage"
              :qr-code-text="qrCodeImage"
              :qr-code-size="150" />
          </div>
        </div>
        <div v-else class="no-app-info">
          <h3>暂无可下载应用</h3>
          <p>当前没有可用的应用下载信息</p>
        </div>
      </template>
    </a-popover>
  </div>
</template>

<style scoped>
.download-icon {
  color: #1890ff;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 16px;
}

.download-icon:hover {
  color: #40a9ff;
  transform: scale(1.1);
}

.qr-image {
  width: 150px;
  height: 150px;
}

.no-app-info {
  text-align: center;
  padding: 24px 16px;
}

.no-app-info h3 {
  color: #ff4d4f;
  margin-bottom: 12px;
}

.no-app-info p {
  color: #666;
  margin-bottom: 8px;
}

.no-app-info .ant-btn {
  margin-top: 16px;
  min-width: 120px;
}
</style>